<template>
  <el-dialog
    class="expord_box"
    title="导出Siddhi应用程序Docker镜像"
    :visible.sync="expordShow"
    width="830px"
    :before-close="handleClose"
  >
    <div class="expord_content">
      <Step :list="steps" :active="active"></Step>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onPrevious" size="small">上一步</el-button>
      <el-button
        :loading="btnLoading"
        type="primary"
        @click="onNext"
        size="small"
        >{{ steps.length === this.active ? "导出" : "下一步" }}</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";
import { generateId } from "@/utils/index";
import { deploy } from "@/api/siddhi.js";
import Step from "@/components/Step";
import _ from "lodash";
import { steps } from "./js/local";
export default {
  components: {
    Step,
  },
  computed: {
    ...mapGetters([]),
  },
  props: {
    expordShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return { btnLoading: false, active: 0, steps: steps };
  },
  methods: {
    onPrevious() {
      if (this.active === 0) {
        return;
      }
      this.active--;
    },
    onNext() {
      if (this.steps.length === this.active) {
        return;
      }
      this.active++;
    },
    handleClose() {
      this.$emit("update:expordShow", false);
    },
  },
};
</script>

<style lang='scss' scoped>
.expord_box {
  /deep/ .el-step__icon.is-text {
    /* display: none; */
  }
  /deep/ .el-dialog__header {
    background-color: transparent !important;
  }
}
</style>